import React,{Component} from 'react'
import {  Row,Col} from 'antd'
import RecommendTag from 'components/recommend-tag'
import AssetTagMenu from 'components/asset-tag-menu'
import ActivityCardCanvas from 'components/activity-tag-canvas'
import {inject, observer} from 'mobx-react'
/**
 * 名称：活动标签编辑
 * 描述：活动标签编辑
 * 调用：创建活动
 * 输入： 
 * 时间：20220402
 */
@inject('tagStore')
@observer
class ActivityTag  extends Component{
   /**
    * 初始化数据
    * 描述：赋初值 活动标签画布的已选标签、标签自增主键key值、选中的标签
    * @param {*} props 
    */
    constructor(props){
        super(props)
        const {tagStore} = props
        tagStore.setUsedTags([])
        tagStore.setAutoKeyIndex(1)
        tagStore.setSelectedKey("")
        tagStore.apiAllTags()
        
    }
    
    /**
     * 左侧菜单选中标签
     * 描述：选中标签后会在中间画栏里面添加一个标签
     * @param {*} tagKey 
     */
    onTagSelect = (tagKey) => {
        
        const {tagStore} = this.props
        let {usedTags,allTags,autoKeyIndex} = tagStore
        var time = new Date()
        var timestr = time.getFullYear()+time.getMonth()+time.getDay()+time.getHours()+time.getMinutes()+time.getSeconds()
        let selectedTag = allTags.find(item=>item.key === tagKey)
        let tagName = selectedTag && selectedTag.name
        let newRelatedTag = {
            key: tagKey + timestr + autoKeyIndex,
            fromKey:tagKey,
            fromName:tagName,
            name:tagName,
            operation:"",
            operationCata:"judge",
            value:""
        }
        usedTags = [...usedTags,newRelatedTag]
        tagStore.setUsedTags(usedTags)
        tagStore.setAutoKeyIndex(autoKeyIndex + 1)
        tagStore.setSelectedKey(tagKey + timestr + autoKeyIndex)
        // tagStore.apiRecommendTags()
    }
    

    
    render(){
        const {tagStore} = this.props
        
        const store = {
          usedTags: tagStore.usedTags,
          recommendTags: tagStore.recommendTags,
          apiRecommendTags: tagStore.apiRecommendTags,
          addUserTag: tagStore.addUserTag,
          showButton:true
        }
       
        
        return (
        <Row gutter={20}>
             <Col span={6}>
                <AssetTagMenu showAllStatus={false} onTagSelect={(tagKey,tag)=>this.onTagSelect(tagKey,tag)}/>
             </Col>
             <Col  span={10}>
                <ActivityCardCanvas store = {tagStore}/>
             </Col>
             <Col  style={{width:"30%"}}  span={8}>
                 <div >
                <RecommendTag store={store} />
                </div>
             </Col>
             
        </Row>
       
        )
    }

    

}

export default ActivityTag



